<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04 动态组件</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button @click="flag='my-hello'">显示hello组件</button>
    <button @click="flag='my-world'">显示world组件</button>
    <div>
        <!-- 使用keep-alive组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并重新创建 -->
        <h1>使用keep-alive对组件进行缓存 每次不需要重新创建</h1>
        <keep-alive>
            <component :is="flag"></component>
        </keep-alive>


        <hr>
        <h1>不使用keep-alive对组件进行缓存 每次都重新创建</h1>
        <component :is="flag"></component>
    </div>
</div>


<script>

    let vm = new Vue({ // 这里的vm也是一个组件，称为根组件Root
        el: "#app",
        data() {
            return {
                flag: 'my-hello'
            }
        },
        components: {
            'my-world': {
                name: "date171208", // 指定组件的名称，默认为标签名，可以不设置
                template: "<h3>我是my-world组件：{{x}}</h3>",
                data() {
                    return {
                        x: Math.random()
                    }
                }
            },
            'my-hello': {
                name: "date17129", // 指定组件的名称，默认为标签名，可以不设置
                template: "<h3>我是my-hello组件：{{y}}</h3>",
                data() {
                    return {
                        y: Math.random()
                    }
                }
            },
        }
    })
</script>
</body>
</html>